<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页三</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layuiMini/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiMini/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/layuiMini/css/public.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }
        .top-panel > .layui-card-body{
            height: 60px;
        }
        .top-panel-number{
            line-height:60px;
            font-size: 30px;
            border-right:1px solid #eceff9;
        }
        .top-panel-tips{
            line-height:30px;
            font-size: 12px
        }
        /*select下拉框部分样式修改*/
        .layui-form-select dl dd.layui-this {
            background-color: #1E9FFF;!important;
            color: #fff;
        }
    </style>
</head>
<body>
<!--<div class="layuimini-container">-->
<div class="layuimini-main">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md15">
            <div id="echarts-records" style="background-color:#ffffff;min-height:600px;padding: 10px"></div>
        </div>
    </div>
    <div class="layui-row layui-col-xs12 layui-col-md12">
        <fieldset class="table-search-fieldset">
            <legend>出勤记录查询</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane">
                    <div class="layui-form-item">
                        <div class="layui-inline myInline" style="width: 300px">
                            <label class="layui-form-label">部门</label>
                            <div class="layui-input-inline" style="width: 50%">
                                <select name="lookDepartment" lay-filter="lookDepartment" lay-search="" id="lookDepartment">
                                    <option value="">请选择部门</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline" style="width: 300px">
                            <label class="layui-form-label">科室</label>
                            <div class="layui-input-inline" style="width: 50%">
                                <select name="lookOffice" lay-filter="officeAction" lay-search="" id="lookOffice">
                                    <option value="">请选择科室</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline" style="width: 300px">
                            <label class="layui-form-label">班组</label>
                            <div class="layui-input-inline" style="width: 50%">
                                <select name="lookTeam" lay-search="" id="lookTeam">
                                    <option value="">请选择班组</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline" style="width: 300px">
                            <label class="layui-form-label">班组班次</label>
                            <div class="layui-input-inline" style="width: 40%">
                                <select name="teamShift" id="teamShift">
                                    <option value="">请选择班次</option>
                                    <option value="白班">白班</option>
                                    <option value="夜班">夜班</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline"  style="width: 300px">
                            <label class="layui-form-label">时间范围</label>
                            <div class="layui-input-inline" style="width: 60%">
                                <input type="text" id="workStartTime" name="workStartTime" readonly autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-primary" type="reset" id="reset">重 置</button>
                            <button class="layui-btn  layui-btn-normal" type="button" id="mySearchBtn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md15">
            <table id="attendanceTable" lay-filter="attendanceFilter"></table>
        </div>
    </div>
<!--    <div class="layui-row layui-col-space15">-->
<!--        <div class="layui-col-xs12 layui-col-md6">-->
<!--            <div id="echarts-dataset" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>-->
<!--        </div>-->
<!--        <div class="layui-col-xs12 layui-col-md6">-->
<!--            <div id="echarts-pies" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>-->
<!--        </div>-->
<!--    </div>-->

</div>
<script src="/layuiMini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/layuiMini/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/module/js/echarts.min.js" charset="utf-8"></script>
<script src="/module/js/wonderland.js" charset="utf-8"></script>
<script type="text/html" id="searchBar">
    <a class="layui-btn layui-btn-normal layui-btn-xs " lay-event="exportHistory">导出文件</a>
</script>
<script>
    layui.use(['layer','form','laydate','table'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            laydate = layui.laydate,
            form = layui.form,
            table = layui.table;
        laydate.render({
            elem:"#workStartTime"
            ,type: 'date'
            ,theme: '#1E9FFF'
            ,range: "~"
        })
        $("#reset").click(function () {
            $('#lookOffice').find("option").remove();
            $('#lookOffice').append(new Option("请选择科室",""));
            $('#lookTeam').find("option").remove();
            $('#lookTeam').append(new Option("请选择班组",""));
            $('#lookDepartment').find("option").remove();
            $('#lookDepartment').append(new Option("请选择部门",""));
            //查询部门
            $.ajax({
                url: '/userManage/formDepartmentOption',
                dataType:'json',
                type:'get',
                success: function (res){
                    departmentList = res.data.data;
                    $.each(res.data.data, function (index, value) {
                        $('#lookDepartment').append(new Option(value.department,value.department));// 下拉菜单里添加元素
                    });
                    layui.form.render("select");
                }
            })
            //后台获取科室下拉框的选项
            getNowPageOffice();
            //后台获取班组下拉框的信息
            getNowPageTeam();
            form.render();
        })
        //搜索条件----部门下拉框
        var departmentList;
        $.ajax({
            url: '/userManage/formDepartmentOption',
            dataType:'json',
            type:'get',
            success: function (res){
                departmentList = res.data.data;
                $.each(res.data.data, function (index, value) {
                    $('#lookDepartment').append(new Option(value.department,value.department));// 下拉菜单里添加元素
                });
                layui.form.render("select");
            }
        })

        //部门下拉框事件
        form.on('select(lookDepartment)',function (data){
            var departmentChecked = $("#lookDepartment").val();
            let factoryNumber;
            $.each(departmentList,function(index,value){
                if(value.department == departmentChecked){
                    factoryNumber = value.departmentNumber;
                }
            })
            if($("#lookDepartment").val() != ""){
                $.ajax({
                    url:"/userManage/getFactoryInfo",
                    type:"GET",
                    data:{
                        factoryNumber : factoryNumber
                    },
                    dataType: "JSON",
                    success:function (res){
                        $('#lookOffice').find("option").remove();
                        $('#lookOffice').append(new Option("请选择科室",""))
                        if(res.respCode == "0000"){
                            $.each(res.data.office, function (index, value) {
                                $('#lookOffice').append(new Option(value.office,value.departmentNumber));// 下拉菜单里添加元素
                            });
                            layui.form.render("select");
                        }else{
                            $('#lookOffice').find("option").remove();
                            $('#lookOffice').append(new Option("请选择科室",""))
                            layui.form.render("select");
                        }
                    }
                })
                getNowPageTeam(departmentChecked);
            }else{
                $('#office').find("option").remove();
                $('#office').append(new Option("请选择科室",""))
                getNowPageOffice();
                $('#team').find("option").remove();
                $('#team').append(new Option("请选择班组",""))
                getNowPageTeam();
                layui.form.render("select");
            }
        })

        //后台获取科室下拉框的选项
        $.ajax({
            url: '/teamWork/selectInputSearch',
            dataType:'json',
            type:'get',
            success: function (res){
                $.each(res.data.data, function (index, value) {
                    $('#lookOffice').append(new Option(value.office,value.departmentNumber));// 下拉菜单里添加元素
                });
                layui.form.render("select");
            }
        })

        //科室下拉框事件
        form.on('select(officeAction)',function (data){
            var factoryNumber = $("#lookOffice").val();
            if($("#lookOffice").val() != ""){
                pageOfficeAction(factoryNumber);
            }else{
                $('#lookTeam').find("option").remove();
                $('#lookTeam').append(new Option("请选择班组",""));
                var department =  $("#lookDepartment").val();
                getPageTeam(department);
                layui.form.render("select");
            }
        })

        //后台获取班组下拉框的信息
        $.ajax({
            url: '/userManage/formTeamOption',
            dataType:'json',
            type:'get',
            success: function (res){
                $.each(res.data.data, function (index, value) {
                    $('#lookTeam').append(new Option(value.teamName,value.teamNumber));// 下拉菜单里添加元素
                });
                layui.form.render("select");
            }
        })

        /**
         * 报表功能
         */
        // var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
        var echartsRecords = echarts.init(document.getElementById('echarts-records'),'wonderland');
        var optionRecords = {
            title: {
                text: '出勤记录-报表图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['应出勤人数','出勤人数','请假人数','旷工人数','放假人数','离职人数','出勤率(%)']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    axisLabel:{
                        interval:0,
                        // rotate:45,//偏转
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '人数',
                    min: 0,
                    max: 3000,
                    interval: 600,
                    axisLabel: {
                        formatter: '{value} 人'
                    }
                },
                {
                    type: 'value',
                    name: '出勤率',
                    min: 0,
                    max: 100,
                    interval: 20,
                    axisLabel: {
                        formatter: '{value} %'
                    }
                }
            ],
            series: [
                {
                    name: '应出勤人数',
                    type: 'bar',
                    label: {
                        show: true,
                        verticalAlign: "bottom",
                        formatter: function (params){
                            let text = params.seriesName.split('');
                            let rs = "";
                            for(var i = 0;i<text.length;i++){
                                rs += text[i] + "\n";
                            }
                            let value = params.data;
                            rs += ":" + "\n" + value
                            return rs;
                        }
                    },
                    emphasis: {
                        focus: 'series'
                    },
                },
                {
                    name: '出勤人数',
                    type: 'bar',
                    label: {
                        show: true,
                        verticalAlign: "bottom",
                        formatter: function (params){
                            let text = params.seriesName.split('');
                            let rs = "";
                            for(var i = 0;i<text.length;i++){
                                rs += text[i] + "\n";
                            }
                            let value = params.data;
                            rs += ":" + "\n" + value
                            return rs;
                        }
                    },
                    emphasis: {
                        focus: 'series'
                    },
                },
                {
                    name: '请假人数',
                    type: 'bar',
                    label: {
                        show: true,
                        verticalAlign: "bottom",
                        formatter: function (params){
                            let text = params.seriesName.split('');
                            let rs = "";
                            for(var i = 0;i<text.length;i++){
                                rs += text[i] + "\n";
                            }
                            let value = params.data;
                            rs += ":" + "\n" + value
                            return rs;
                        }
                    },
                    emphasis: {//高亮
                        focus: 'series'
                    },
                },
                {
                    name: '旷工人数',
                    type: 'bar',
                    label: {
                        show: true,
                        verticalAlign: "bottom",
                        formatter: function (params){
                            let text = params.seriesName.split('');
                            let rs = "";
                            for(var i = 0;i<text.length;i++){
                                rs += text[i] + "\n";
                            }
                            let value = params.data;
                            rs += ":" + "\n" + value
                            return rs;
                        }
                    },
                    emphasis: {
                        focus: 'series'
                    },
                },
                {
                    name: '放假人数',
                    type: 'bar',
                    label: {
                        show: true,
                        verticalAlign: "bottom",
                        formatter: function (params){
                            let text = params.seriesName.split('');
                            let rs = "";
                            for(var i = 0;i<text.length;i++){
                                rs += text[i] + "\n";
                            }
                            let value = params.data;
                            rs += ":" + "\n" + value
                            return rs;
                        }
                    },
                    emphasis: {
                        focus: 'series'
                    },
                },
                {
                    name: '离职人数',
                    type: 'bar',
                    label: {
                        show: true,
                        verticalAlign: "bottom",
                        formatter: function (params){
                            let text = params.seriesName.split('');
                            let rs = "";
                            for(var i = 0;i<text.length;i++){
                                rs += text[i] + "\n";
                            }
                            let value = params.data;
                            rs += ":" + "\n" + value
                            return rs;
                        }
                    },
                    emphasis: {
                        focus: 'series'
                    },
                },
                {
                    name: '出勤率(%)',
                    type: 'line',
                    label: {
                        show: true,
                        formatter: '{a}:{c}%'
                    },
                    yAxisIndex: 1,
                }
            ]
        };
        echartsRecords.setOption(optionRecords);
        echartsRecords.showLoading();
        getMyData(echartsRecords);
        // $("#mySearchBtn").click(function (){
        //     var chart = echartsRecords;
        //     getMyData(chart);
        //     return false;
        // })

        /**
         * 表格数据导入
         * @param echartsId
         */
        function getMyData(echartsId){
            let name = [];
            let normalPeople = [];
            let realPeople = [];
            let attendance = [];
            let notWorkPeople = [];
            let absenteeismPeople = [];
            let holidayPeople = [];
            let leavePeople = [];
            $.ajax({
                url:"getHistoryData",
                type:"GET",
                dataType:"JSON",
                success:function (res){
                    if(res.respCode == "0000"){
                        $.each(res.data.lastData,function (index,item){
                            name.push(item.workBeginTime);
                            normalPeople.push(item.normalPeople);
                            realPeople.push(item.realPeople);
                            attendance.push(item.attendance);
                            notWorkPeople.push(item.notWorkPeople);
                            absenteeismPeople.push(item.absenteeismPeople);
                            holidayPeople.push(item.holidayPeople);
                            leavePeople.push(item.leavePeople);
                        })
                        echartsId.hideLoading();
                        echartsId.setOption({
                            xAxis: [
                                {
                                    data : name
                                }
                            ],
                            series: [
                                {
                                    data: normalPeople,
                                },
                                {
                                    data: realPeople,
                                },
                                {
                                    data: notWorkPeople,
                                },
                                {
                                    data: absenteeismPeople,
                                },
                                {
                                    data: holidayPeople,
                                },
                                {
                                    data: leavePeople,
                                },
                                {
                                    data: attendance,
                                },
                            ]
                        })
                    }else{
                        echartsId.hideLoading();
                        layer.msg("查询结果为空",{icon:5});
                    }
                }
            })
            return false;
        }

        //表格数据导出
        $("#exportRecordData").click(function(){
            //获取一周的所有时间
            let oneDayTime = 1000*60*60*24;
            let date = new Date("2022-01-09");
            let today = new Date();
            let todayIndex = today.getDay() || 7;
            let startDate = new Date(today.getTime() - oneDayTime*(todayIndex-1));
            let endDate = new Date(today.getTime() + oneDayTime*(7 - todayIndex))
            console.log(startDate);
            console.log(endDate)
        })

        /**
         * 获取页面科室下拉框数据
         */
        function getNowPageOffice(){
            $.ajax({
                url: '/teamWork/selectInputSearch',
                dataType:'json',
                type:'get',
                success: function (res){
                    $.each(res.data.data, function (index, value) {
                        $('#lookOffice').append(new Option(value.office,value.departmentNumber));// 下拉菜单里添加元素
                    });
                    layui.form.render("select");
                }
            })
        }

        /**
         * 获取页面班组下拉框数据
         * @param department
         */
        function getNowPageTeam(department){
            if(department == null){
                department = "";
            }
            $.ajax({
                url: '/userManage/formTeamOption?department=' + department,
                dataType:'json',
                type:'get',
                success: function (res){
                    $('#lookTeam').find("option").remove();
                    $('#lookTeam').append(new Option("请选择班组",""))
                    $.each(res.data.data, function (index, value) {
                        $('#lookTeam').append(new Option(value.teamName,value.teamNumber));// 下拉菜单里添加元素
                    });
                    layui.form.render("select");
                }
            })
        }

        /**
         * 科室下拉框事件
         * @param factoryNumber
         */
        function pageOfficeAction(factoryNumber){
            $.ajax({
                url:"/userManage/getTeamInfo",
                type:"GET",
                data:{
                    factoryNumber : factoryNumber
                },
                dataType: "JSON",
                success:function (res){
                    $('#lookTeam').find("option").remove();
                    $('#lookTeam').append(new Option("请选择班组",""))
                    if(res.respCode == "0000"){
                        $.each(res.data.team, function (index, value) {
                            $('#lookTeam').append(new Option(value.teamName,value.teamNumber));// 下拉菜单里添加元素
                        });
                        layui.form.render("select");
                    }else{
                        $('#lookTeam').find("option").remove();
                        $('#lookTeam').append(new Option("请选择班组",""))
                        layui.form.render("select");
                    }
                }
            })
        }


        /**
         * 出勤记录表格
         */
        table.render({
            elem: '#attendanceTable',
            url: 'getHistoryData',
            even: true,
            toolbar: '#searchBar',
            id: 'historyTableReload',
            page:{
                group:5,
                limit: 10,
                limits:[10,15,20,25,50],
                theme:'#1E9FFF',
            },
            parseData: function(res){
                return{
                    "code" : res.data.code,
                    "count" : res.data.count,
                    "data" : res.data.lastData
                }
            },
            response:{
                statusName : 'code',
                statusCode : 0,
                dataName : 'data'
            },
            cols: [
                    [
                        {field:'aa',type: "numbers",title: "序号"},
                        {field: 'department', title: '名称', sort: true},
                        {field: 'workBeginTime', title: '日期', sort: true},
                        {field: 'normalPeople', title: '应出勤人数', sort: true},
                        {field: 'realPeople', title: '出勤人数', sort: true},
                        {field: 'notWorkPeople', title: '请假人数', sort: true},
                        {field: 'absenteeismPeople', title: '旷工人数', sort: true},
                        {field: 'holidayPeople', title: '放假人数'},
                        {field: 'leavePeople', title: '离职人数', sort: true},
                        {field: 'attendance', title: '出勤率', sort: true},
                        // {title: '操作', minWidth: 200, toolbar: '#currentTableBar', align: "center"}
                    ]
            ],
            done: function (res,curr,count){
                $('th').css({'background-color' : '#87CEFA','text-align': 'center'})
                if(res.count <= 0){
                    $("[lay-id=historyTableReload] .layui-table-main").html('<div class="layui-none">'+"无出勤记录信息"+'</div>');
                }
                $("[data-field = 'attendance']").children().each(function(){
                    let newText = $(this).text() + "%";
                    $(this).text(newText);
                })
            },
        })

        /**
         * 搜索事件
         */
        $(document).on("click","#mySearchBtn",function(data){
            table.reload("historyTableReload",{
                page:{
                    curr: 1,
                    theme:'#1E9FFF'
                },
                where:{
                    department: $("#lookDepartment").val(),
                    teamOffice : $("#lookOffice").val(),
                    teamName : $("#lookTeam").val(),
                    teamShift : $("#teamShift").val(),
                    historyWorkDate : $("#workStartTime").val()
                },
                done: function (res,curr,count){
                    $('th').css({'background-color' : '#87CEFA','text-align': 'center'})
                    if(res.count <= 0){
                        layer.msg("未查询到相关出勤信息",{icon:5})
                        $("[lay-id=historyTableReload] .layui-table-main").html('<div class="layui-none">'+"无出勤记录信息"+'</div>');
                    }
                    $("[data-field = 'attendance']").children().each(function(){
                        let newText = $(this).text() + "%";
                        $(this).text(newText);
                    })
                },
            })
        })

        /**
         * 监听table表格头部工具栏
         */
        table.on('toolbar(attendanceFilter)',function(obj){
            let eventName = obj.event;
            switch(eventName){
                case 'exportHistory':
                    exportAction();
                    break;
                default:
                    break;
            }
        })

        /**
         * 导出文件事件
         */
        function exportAction(){
            let exportParam = {};
            let department = $("#lookDepartment").val();
            if(department != null && department !=""){
                exportParam.department = department;
            }
            let teamOffice = $("#lookOffice").val();
            if(teamOffice != null && teamOffice != ""){
                exportParam.teamOffice = teamOffice;
            }
            let teamName = $("#lookTeam").val();
            if(teamName != null && teamName != ""){
                exportParam.teamName = teamName;
            }
            let teamShift = $("#teamShift").val();
            if(teamShift != null && teamShift != ""){
                exportParam.teamShift = teamShift;
            }
            let historyWorkDate = $("#workStartTime").val();
            if(historyWorkDate != null && historyWorkDate != ""){
                exportParam.historyWorkDate = historyWorkDate;
            }
            var urlLink = '';
            $.each(exportParam,function(item,key){
                var link = '&' + item + "=" + key;
                urlLink += link;
            })
            urlLink = 'exportHistoryExcel?' + urlLink.substr(1) + "&ExcelId=4";
            location.href = urlLink;
        }
    });
</script>
</body>
</html>
